<template>
  <el-aside :width="collapsed ? '64px' : '200px'" class="sidebar">
    <!-- 折叠按钮 -->
    <div class="collapse-button" @click="toggleCollapse">
      <el-icon :size="20">
        <component :is="collapsed ? 'Expand' : 'Fold'" />
      </el-icon>
    </div>

    <!-- 导航菜单 -->
    <el-menu
        :default-active="activeMenu"
        :collapse="collapsed"
        :collapse-transition="false"
        router
    >
      <el-menu-item
          v-for="item in menuItems"
          :key="item.path"
          :index="item.path"
          :route="item.path"
      >
        <el-icon>
          <component :is="item.icon" />
        </el-icon>
        <template #title>{{ item.name }}</template>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

// Props
const props = defineProps({
  menuItems: {
    type: Array,
    required: true,
    default: () => [],
  },
  collapsed: {
    type: Boolean,
    default: false,
  },
});

// Events
const emit = defineEmits(['toggle-collapse']);

// 当前路由
const route = useRoute();

// 高亮当前菜单项
const activeMenu = computed(() => route.path);

// 切换折叠状态
const toggleCollapse = () => {
  emit('toggle-collapse');
};
</script>

<style scoped>
.sidebar {
  height: 100vh;
  border-right: 1px solid #e4e7ed;
  transition: width 0.3s;
}

.collapse-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  border-bottom: 1px solid #e4e7ed;
}

.collapse-button:hover {
  background-color: #f5f7fa;
}

.el-menu {
  border-right: none;
}

.el-menu-item {
  padding-left: 20px !important;
}

.el-menu-item.is-active {
  background-color: #ecf5ff;
  color: #409eff;
}
</style>